﻿@model Nop.Plugin.ActiveForever.ActiveChat.Models.ActiveChatModel

<!DOCTYPE html>
<html lang="en">
  <head>

    <meta charset="utf-8">
    <title>Live Chat</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
    <link href="~/Plugins/ActiveForever.ActiveChat/Content/livechat.css" rel="stylesheet">

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script src="~/Plugins/ActiveForever.ActiveChat/Scripts/jquery.signalR-1.1.2.min.js"></script>
    <script src="/signalr/hubs"></script>
    <script src="~/Plugins/ActiveForever.ActiveChat/Scripts/jquery.prettyDate.js"></script>
    <script src="~/Plugins/ActiveForever.ActiveChat/Scripts/jquery.browser.js"></script>
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <script src="~/Plugins/ActiveForever.ActiveChat/Scripts/livechat-client.js"></script>

    <style type="text/css">

        body {
            padding: 0;
            margin: 0
        }

        .modal-footer {
            position: fixed;
            bottom: 0px;
            left: 0px;
            width: 100% !important;
            padding: 0px
        }

        .modal-body {
            max-height: 100%;
            overflow: hidden;
        }

    </style>

    <script type="text/javascript">
        $(function () {
            liveChatClient.init({ clientIP: '@Request.ServerVariables["REMOTE_ADDR"]', coBrowsing: false });
        });

    </script>

</head>
<body>

<div id="modalLiveChatOffLine" class="hide">

    <div class="modal-header">
        <button type="button" class="close">&times;</button>
        <h3>@T("Plugins.Widgets.ActiveChat.TitleOffline")</h3>
    </div>

    <div class="modal-body show-banner">

        @Html.Raw(Model.ClientWelcomeMessageOffline)
        <hr />

        <form class="form-horizontal">
            <div class="control-group">
                <div class="control-label">@T("Plugins.Widgets.ActiveChat.TextFieldName")</div>
                <div class="controls">
                    <input type="text" class="span3" id="textLiveChatMessageName" name="textLiveChatMessageName" />
                </div>
            </div>
            <div class="control-group">
                <div class="control-label">@T("Plugins.Widgets.ActiveChat.TextFieldEmail")</div>
                <div class="controls">
                    <input type="text" id="textLiveChatMessageEmail" name="textLiveChatMessageEmail" />
                </div>
            </div>
            <div class="control-group">
                <div class="control-label">@T("Plugins.Widgets.ActiveChat.TextFieldMessage")</div>
                <div class="controls">
                    <textarea id="textLiveChatMessageText" name="textLiveChatMessageText" style="height: 100px" class="input-xxlarge"></textarea>
                </div>
            </div>
        </form>

    </div>

    <div class="modal-footer">
        <div style="margin: 10px">
            <button class="btn btn-primary" id="btn-liveChatSendMessage">@T("Plugins.Widgets.ActiveChat.LeaveAMessage")</button>
            <button class="btn liveChatClose">@T("Plugins.Widgets.ActiveChat.Close")</button>
        </div>
    </div>

</div>

<div id="modalLiveChatRegister">

    <div class="modal-header">
        <button type="button" class="close">&times;</button>
        <h3>@T("Plugins.Widgets.ActiveChat.TitleOnline")</h3>
    </div>

    <div class="modal-body show-banner">

        @Html.Raw(Model.ClientWelcomeMessageOnline)
        <hr />

        <form class="form-horizontal" novalidate="novalidate" id="form-liveChatRegister">
            <div class="control-group">
                <div class="control-label">@T("Plugins.Widgets.ActiveChat.TextFieldName")</div>
                <div class="controls">
                    <input type="text" class="span3" id="textLiveChatName" name="textLiveChatName" />
                </div>
            </div>
            <div class="control-group">
                <div class="control-label">@T("Plugins.Widgets.ActiveChat.TextFieldEmail")</div>
                <div class="controls">
                    <input type="text" id="textLiveChatEmail" name="textLiveChatEmail" />
                </div>
            </div>
        </form>

    </div>

    <div class="modal-footer">
        <div style="margin: 10px">
            <button class="btn btn-primary" id="btn-liveChatStart"><i class="icon-user icon-white"></i> @T("Plugins.Widgets.ActiveChat.StartChat")</button>
        </div>
    </div>

</div>

<div class="hide" id="modalLiveChat">

    <div class="modal-header">
        <button type="button" class="close">&times;</button>
        <h3>@T("Plugins.Widgets.ActiveChat.TitleOnline")</h3>
    </div>

    <div class="modal-body">
        <div id="liveChatText" class="chatBox" style="margin: -15px"></div>
    </div>

    <div class="modal-footer">

        <div id="typing-indicator-client">
            <i class="icon-spinner icon-spin"></i> @T("Plugins.Widgets.ActiveChat.OperatorTyping")
        </div>

        <div style="margin: 10px">
            <div id="liveChatInput" class="hide">
                <div class="input-append">
                    <input type="text" id="textLiveChatMessage" />
                    <button class="btn btn-primary" id="btnSendChatMessage">@T("Plugins.Widgets.ActiveChat.Send")</button>
                </div>
            </div>
            <div id="postChatInput" class="hide">
                <button class="btn liveChatClose">@T("Plugins.Widgets.ActiveChat.Close")</button>
            </div>
        </div>
    </div>

</div>


</body>
</html>
